<template>
    <div class="top">
        <svg class="icon" aria-hidden="true" @click="lastpage" >
            <use xlink:href="#icon-xiangzuojiantou"></use>
      </svg>
      <span>工资结算</span>
      <div class="servefee">单次服务费用</div>
    </div>
    <div class="salaryinfo">
        <img src="/image26.png" alt="">
        <div>单次服务费用由入驻公司定价</div>
        <div>单次服务时常为3小时</div>
        <div>超出部分按40元/30分钟计算</div>
    </div>
    <div class="servefee1">额外费用</div>

    <div class="salaryinfo">
        <img src="/image27.png" alt="">
        <div>接送过程中的接通费用由服务人员代缴部分</div>
        <div>以及在服务过程中产生的其他代缴费用</div>
        
    </div>
    <div class="servefee1">平台抽成</div>
    <div class="salaryinfo">
        <img src="/image28.png" alt="">
        <div>对于诊疗陪护次数制</div>
        <div>平台将按定价价格抽取20%服务费</div>
        
    </div>
</template>
<script>
export default{
    methods:{
        lastpage(){
            this.$router.push('/');  
        }
    }
}
</script>
<style scoped>
.top{
   position: relative;
    width:7.86rem ;
    height: 3.64rem;
    background-image: linear-gradient(to bottom,rgb(150, 197, 193),rgb(55,170,176));
}

.top .icon{
     position: absolute;
     top: 1rem;
    left: 20px;
    }
.top span{
    position: absolute;
    top: 1rem;
    left: 3rem;
    font-size: 22px;
    font-weight: bold;
}
.servefee{
    width:3.02rem;
    height: .74rem;
    position: absolute;
    bottom: 15px;
    left: 15px;
    text-align: center;
    line-height: 0.74rem;
    background-image: linear-gradient(to right,rgb(43,186,0),rgb(0,121,186));
    border-radius: 50px /50px;
    color:#FFFFFF ;
    font-size: 20px;
    font-weight: bolder;
}
.salaryinfo{
    margin-bottom: 20px;
    position: relative;
    padding: 20px;
    width:7.38rem ;
    height: 1.96rem;
    /* background-color: gray; */
    border-radius: 5px;
    box-shadow:5px 5px 5px #888888 ;
}
.salaryinfo img{
    display: inline-block;
    width: 0.68rem;
    height: .68rem;
}
.salaryinfo div{
    color:#000000 ;
    font-size: 15px;
    font-weight: bolder;
}
.salaryinfo div:nth-child(2){
    position: absolute;
    top: 0.4rem;
    left: 2rem;
    display: inline-block;
}
.salaryinfo div:nth-child(3){
    position: absolute;
    top: 1rem;
    left: 2rem;
    display: inline-block;
}
.salaryinfo div:nth-child(4){
    position: absolute;
    top: 1.6rem;
    left: 2rem;
    display: inline-block;
}
.servefee1{
    margin-bottom: 0.4rem;
    margin-left: 0.4rem;
    width:3.02rem;
    height: .74rem;
    text-align: center;
    line-height: 0.74rem;
    background-image: linear-gradient(to right,rgb(43,186,0),rgb(0,121,186));
    border-radius: 50px /50px;
    color:#FFFFFF ;
    font-size: 20px;
    font-weight: bolder;
}
</style>